/* ===== 主題切換系統 ===== */

/* 默認主題（深色） */
:root {
  /* 基本顏色 */
  --text-white: #f5f5f5;
  --primary-base: #8d9d6a;
  --primary-base-rgb: 141, 157, 106; /* RGB值用於透明度變化 */
  --primary-light: #a9b98a;
  --primary-light-rgb: 169, 185, 138;
  --primary-dark: #6b7a4d;
  --primary-dark-rgb: 107, 122, 77;
  --secondary-color: #2a2a2a;
  --secondary-color-rgb: 42, 42, 42;
  --border-color: #444444;
  --border-color-rgb: 68, 68, 68;
  --border-hover: #555555;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --bg-page: #1a1a1a;
  --bg-page-rgb: 26, 26, 26;
  --bg-dark: #2a2a2a;
  --bg-dark-rgb: 42, 42, 42;
  --bg-light: #333333; /* 深色主題下的淺色背景 */
  --bg-hover: #3a3a3a; /* 深色主題下的懸停背景 */

  /* 頭部和導航 */
  --header-bg: #222222;
  --header-text: #f5f5f5;
  --nav-text: #ffffff;

  /* 組件顏色 */
  --card-bg: #2a2a2a;
  --input-bg: #333333;
  --button-text: #ffffff;
  --button-hover: #9db46f;
  --icon-color: #b8b8b8;

  /* 特殊文本 */
  --vip-text: #ffffff;
  --text-secondary: #cccccc;
  --text-white: #ffffff;

  /* 過渡效果 */
  --transition-time: 0.3s;
}

/* 淺色主題 */
[data-theme="light"] {
  /* 基本顏色 */
  --text-color: #1a1a1a !important;
  --primary-base: #8d9d6a;
  --primary-base-rgb: 141, 157, 106; /* RGB值用於透明度變化 */
  --primary-light: #a9b98a;
  --primary-light-rgb: 169, 185, 138;
  --bg-light: #f2f2f2; /* 淺色主題下的淺色背景 */
  --bg-hover: #e9ecef; /* 淺色主題下的懸停背景 */
  --primary-dark: #6b7a4d;
  --primary-dark-rgb: 107, 122, 77;
  --secondary-color: #f0f0f0;
  --secondary-color-rgb: 240, 240, 240;
  --border-color: #e0e0e0;
  --border-color-rgb: 224, 224, 224;
  --border-hover: #adb5bd;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --bg-page: #ffffff;
  --bg-page-rgb: 255, 255, 255;
  --bg-dark: #f0f0f0;
  --bg-dark-rgb: 240, 240, 240;

  /* 頭部和導航 */
  --header-bg: #ffffff;
  --header-text: #333333;
  --nav-text: #333333;

  /* 組件顏色 */
  --card-bg: #ffffff;
  --input-bg: #f5f5f5;
  --button-text: #ffffff;
  --button-hover: #9db46f;
  --icon-color: #333333 !important;

  /* 特殊文本 */
  --vip-text: #1a1a1a;
  --text-secondary: #222222 !important;
  --text-white: #333333 !important;
  --bg-white: #fff;
}

/* 全局應用主題 */
body {
  background-color: var(--bg-page);
  color: var(--text-color);
  transition: background-color var(--transition-time),
    color var(--transition-time);
}

/* 全局文本顏色設置 */
body p,
body span,
body div:not([class*="color"]),
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body li,
body label,
body td,
body th,
body small,
body strong {
  color: var(--text-color);
  transition: color var(--transition-time);
}

/* 保留特定元素顏色設置 */
body .nav-menu .nav-item,
body [class*="primary"],
body [class*="secondary"],
body button,
body .btn,
body .button,
body a:not([class*="text"]),
body .el-button,
body .el-input,
body .el-select,
body .el-dropdown,
body .el-menu-item,
body .el-submenu__title,
body .el-checkbox,
body .el-radio,
body .el-switch,
body .el-tag,
body .el-badge,
body .el-progress,
body .el-step,
body .el-timeline-item,
body .el-color-picker,
body .el-rate,
body .el-slider,
body .el-transfer,
body .el-tree-node,
body .el-pagination,
body .el-table th,
body .el-table td,
body .el-date-picker,
body .el-time-picker,
body .el-popover,
body .el-tooltip,
body .el-dialog,
body .el-drawer,
body .el-message,
body .el-notification,
body .el-loading-mask,
body .el-loading-spinner,
body .el-alert,
body .el-card,
body .el-collapse-item,
body .el-tabs__item,
body .el-breadcrumb__item,
body .el-steps__title,
body .el-steps__description,
body .el-upload,
body .el-divider,
body .el-image,
body .el-avatar,
body .el-calendar,
body .el-backtop,
body .el-link,
body .el-empty,
body .el-result,
body .el-descriptions-item,
body .el-timeline,
body .el-image-viewer,
body .el-skeleton,
body .el-space,
body .el-affix,
body .el-config-provider {
  color: inherit;
}

/* 輔助類 */
.text-theme {
  color: var(--text-color) !important; /* 跟隨主題的文本顏色 */
}

.text-primary {
  color: var(--primary-base) !important; /* 主題色文本 */
}

.text-secondary {
  color: var(--text-secondary) !important; /* 次要文本顏色 */
}

.text-white {
  color: #ffffff !important; /* 白色文本，不隨主題變化 */
}

.text-black {
  color: #000000 !important; /* 黑色文本，不隨主題變化 */
}

/* 頭部和導航 */
.header,
header {
  background-color: var(--header-bg);
  color: var(--header-text);
  transition: background-color var(--transition-time),
    color var(--transition-time);
}

.nav-menu .nav-item {
  color: var(--nav-text);
  transition: color var(--transition-time);
}

/* 卡片和容器 */
.card,
.el-card {
  background-color: var(--card-bg);
  transition: background-color var(--transition-time);
}

/* 按鈕 */
.btn,
.button,
.el-button:not(.el-button--primary):not(.el-button--success):not(
    .el-button--warning
  ):not(.el-button--danger):not(.el-button--info) {
  background-color: var(--primary-base);
  color: var(--button-text);
  transition: background-color var(--transition-time),
    color var(--transition-time);
}

.btn:hover,
.button:hover,
.el-button:not(.el-button--primary):not(.el-button--success):not(
    .el-button--warning
  ):not(.el-button--danger):not(.el-button--info):hover {
  background-color: var(--button-hover);
}

/* 輸入框 */
input,
textarea,
.el-input__inner {
  background-color: var(--input-bg);
  color: var(--text-color);
  transition: background-color var(--transition-time),
    color var(--transition-time);
}

/* 圖標 */
.icon,
.iconfont,
.el-icon {
  color: var(--icon-color);
  transition: color var(--transition-time);
}

/* 英雄區 */
.hero-section h1,
.hero-section .title {
  color: var(--vip-text);
  transition: color var(--transition-time);
}

.hero-section p,
.hero-section .subtitle {
  color: var(--text-secondary);
  transition: color var(--transition-time);
}
